<template>
    <div class="tab-nav">
        <van-tabbar route v-model="current"  active-color="#ee0a24">
  <template v-for="(item,index) in tabbarData" :key="index">
    <van-tabbar-item :to="`/${item.path}`">
    <span>{{item.text}}</span>
    <template #icon>
        <img v-if="current === index" :src="getURL(`${item.path}_active`)" alt=""/>
        <img v-else :src="getURL(item.path)" alt=""/>
    </template>
  </van-tabbar-item>
  </template>
</van-tabbar>

    </div>
</template>
    

<script setup>
import { ref } from "@vue/reactivity"
import tabbarData from '@/assets/data/nav.js'
import { useRoute } from "vue-router"
import { watch } from "@vue/runtime-core"

// 处理本地路径动态数据会原样输出无法解析
const getURL = (img)=>{
    return new URL(`../../assets/img/tabbar/tab_${img}.png`,import.meta.url).href
}
// 设置点击tab切换和点击跳转路由
const current = ref(0)

// 
const route = useRoute();
watch(route,(newV)=>{
    const path = newV.path
    const index = tabbarData.findIndex((i)=>i.path===path.slice(1));
    if(index === -1)return
    current.value = index;
})
</script>
     
<style lang="less" scoped>
.tab-nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    height: 50px;
    justify-content: space-around;
    --van-tabbar-item-icon-size:37px!important;
    a {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
</style>